<template>
  <a-card>
    <template #title>
      <a-form>
        <a-row :gutter="16">
          <a-col :md="6" :xs="24">
            <a-form-item :label="$t('用户姓名')">
              <a-input v-model:value="page.name"></a-input>
            </a-form-item>
          </a-col>
          <a-col :md="6" :xs="24">
            <a-form-item :label="$t('手机号码')">
              <a-input v-model:value="page.phone"></a-input>
            </a-form-item>
          </a-col>
          <a-col :md="6" :xs="24">
            <a-form-item :label="$t('邮箱号')">
              <a-input v-model:value="page.email"></a-input>
            </a-form-item>
          </a-col>
          <a-col :md="6" :xs="24">
            <a-form-item :label="$t('处理状态')">
              <a-select v-model:value="page.isDispose" allowClear>
                <a-select-option :value="1">{{ $t('已处理') }}</a-select-option>
                <a-select-option :value="0">{{ $t('未处理') }}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md="6" :xs="24">
            <a-form-item :label="$t('客服')">
              <a-select v-model:value="page.employeeId" allowClear>
                <a-select-option v-for="item in systemUserList" :key="item.id" :value="item.id">{{
                    item.name
                  }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md="8" :xs="24">
            <a-form-item :label="$t('反馈时间')">
              <a-range-picker v-model:value="page.feedbackTime"/>
            </a-form-item>
          </a-col>
          <a-col :md="8" :xs="24">
            <a-form-item :label="$t('备注时间')">
              <a-range-picker v-model:value="page.remarkTime"/>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col style="text-align: right" :span="24">
            <a-button type="primary" @click="getTableData">{{ $t('查询') }}</a-button>
            <a-button style="margin-left: 10px" @click="resetSearch">{{ $t('重置') }}</a-button>
          </a-col>
        </a-row>
      </a-form>
    </template>

    <a-table row-key="id" :columns="tableColumn" :pagination="pagination" :data-source="tableData" :scroll="{x:1000}">
      <template #content="{record}">
        <a-tooltip placement="topLeft" :title="record.content">
          <div style=" white-space: nowrap;overflow: hidden; text-overflow: ellipsis;"> {{
              record.content
            }}
          </div>
        </a-tooltip>
      </template>
        <template #image="{record}">
            <a-image v-for="(item,index) in record.imgArr" :key="item" v-show="index === 0" style="margin-right: 10px;margin-bottom: 10px" :width="80" :height="80" :src="item" />
        </template>
    </a-table>
  </a-card>
</template>

<script>
import {reactive, ref, toRefs, onMounted, computed, createVNode} from 'vue'
import {fetchProblemList} from "@/api/index";
import {selectSystemUser} from "../../api";

import locale from '@/locale'
const {t} = locale.global;
import {dateFormatTimeStamp} from '@/utils'
import {Image, ImagePreviewGroup} from "ant-design-vue";

const tableColumn = [
  {title: t('用户姓名'), dataIndex: 'name', width: 150, align: 'center',},
  {title: t('手机号码'), dataIndex: 'phone', width: 150, align: 'center'},
  {title: t('邮箱号'), dataIndex: 'email', width: 150, align: 'center'},
  {title: t('反馈内容'), dataIndex: 'content', width:250,  slots: {customRender: 'content',}, align: 'center'},
  {
    title: t('图片'), dataIndex: 'img1', align: 'center',customRender: ({text}) => {
      if (text) {
        const arr = text.split(',')
        return arr.map(item => {
          return createVNode(Image, {
            style: {
              width:'80px',
              height:'80px',
              marginRight:'10px',
              marginBottom:'10px'
            },
            src: item,
          })
        })
      }
    },width:250
  },
  {title: t('反馈时间'), dataIndex: 'createTime', width: 150, align: 'center'},
  {title: t('处理状态'), dataIndex: 'isDispose', width: 150, align: 'center',customRender: ({text}) => {
      return text === 1? t('已处理') : t('未处理')
    },},
  {title: t('客服'), dataIndex: 'employeeName', width: 150, align: 'center'},
  {title: t('备注'), dataIndex: 'remark', width: 150, align: 'center'},
  {title: t('备注时间'), dataIndex: 'remarkTime', width: 150, align: 'center'},
]
export default {
  name: "NetProfit",
  setup() {
    const formRef = ref(null)
    const state = reactive({
      page: {
        pageNum: 1,
        pageSize: 10,
        total: 0
      },
      tableData: [],
      totalTableData: [],
      systemUserList: [],
    })
    const pagination = computed(() => ({
      current: state.page.pageNum,
      total: state.page.total,
      pageSize: state.page.pageSize,
      showSizeChanger: true,
      showQuickJumper: true,
      pageSizeOptions: ['10', '50', '100', '200'],
      showTotal: total => total ,
      onChange: (page) => {
        state.page.pageNum = page
        method.getTableData()
      },
      onShowSizeChange: (page, size) => {
        state.page.pageNum = page
        state.page.pageSize = size
        method.getTableData()
      }
    }))
    const method = {
      async getTableData() {
        const [insertStartTime, insertEndTime] = dateFormatTimeStamp(state.page.feedbackTime || [])
        const [updateStartTime, updateEndTime] = dateFormatTimeStamp(state.page.remarkTime || [])
        const params = {
          insertStartTime, insertEndTime, updateStartTime, updateEndTime,
          ...state.page,
        }
        delete params.remarkTime
        delete params.feedbackTime
        const res = await fetchProblemList(params)
        if (res.code === 1) {
          const {list, total} = res.data
          state.tableData = list
          state.page.total = total
        }
      },

      resetSearch() {
        state.page = {
          pageNum: 1,
          pageSize: 10,
          total: 0
        }
        method.getTableData()
      },
    }
    onMounted(() => {
      method.getTableData()
      selectSystemUser().then(res => {
        state.systemUserList = res.data
      })
    })
    return {
      tableColumn,
      formRef,
      pagination,
      ...method,
      ...toRefs(state)
    }
  }
}
</script>

<style scoped>

</style>

